<%--
  Created by IntelliJ IDEA.
  User: user
  Date: 2024/7/23
  Time: 11:14
  To change this template use File | Settings | File Templates.
--%>
<%--<%@ page contentType="text/html;charset=UTF-8" language="java" %>--%>
<%--<html>--%>
<%--<head>--%>
<%--    <title>Title</title>--%>
<%--    <script src= "js/echarts.js"></script>--%>
<%--    <script src="js/jquery.min.js"></script>--%>
<%--    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">--%>
<%--</head>--%>
<%--<body>--%>
<%--<div id="b" style="width: 100%;height:100%;float: left;"> </div>--%>
<%--<script>--%>
<%--    var myChart6 = echarts.init(document.getElementById('b'));--%>
<%--    var obj;--%>
<%--    // function getCategoryPolice(){--%>
<%--    $.ajax({--%>
<%--        type : "get",--%>
<%--        async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）--%>
<%--        url : "/bigdatapro4/servlet6",    //请求发送到相应的servlet--%>
<%--        dataType : "json",        //返回数据形式为json--%>
<%--        success : function(data) {--%>

<%--            //请求成功时执行该函数内容，result即为服务器返回的json对象--%>
<%--            if (data) {--%>
<%--                obj = eval(data);--%>
<%--                const  name=[]--%>
<%--                const  value=[]--%>
<%--                for(var i=0;i<obj.length;i++){--%>
<%--                    name.push(obj[i].name)--%>
<%--                    value.push(obj[i].value)--%>
<%--                }--%>
<%--                const piePatternSrc =--%>
<%--                    '';--%>
<%--                const bgPatternSrc =--%>
<%--                    '';--%>
<%--                const piePatternImg = new Image();--%>
<%--                piePatternImg.src = piePatternSrc;--%>
<%--                const bgPatternImg = new Image();--%>
<%--                bgPatternImg.src = bgPatternSrc;--%>
<%--                option = {--%>
<%--                    backgroundColor: {--%>
<%--                        image: bgPatternImg,--%>
<%--                        repeat: 'repeat'--%>
<%--                    },--%>
<%--                    title: {--%>
<%--                        text: '饼图纹理',--%>
<%--                        textStyle: {--%>
<%--                            color: '#235894'--%>
<%--                        }--%>
<%--                    },--%>
<%--                    tooltip: {},--%>
<%--                    series: [--%>
<%--                        {--%>
<%--                            name: 'pie',--%>
<%--                            type: 'pie',--%>
<%--                            selectedMode: 'single',--%>
<%--                            selectedOffset: 30,--%>
<%--                            clockwise: true,--%>
<%--                            label: {--%>
<%--                                fontSize: 18,--%>
<%--                                color: '#235894'--%>
<%--                            },--%>
<%--                            labelLine: {--%>
<%--                                lineStyle: {--%>
<%--                                    color: '#235894'--%>
<%--                                }--%>
<%--                            },--%>
<%--                            data: obj,--%>
<%--                            itemStyle: {--%>
<%--                                opacity: 0.7,--%>
<%--                                color: {--%>
<%--                                    image: piePatternImg,--%>
<%--                                    repeat: 'repeat'--%>
<%--                                },--%>
<%--                                borderWidth: 3,--%>
<%--                                borderColor: '#235894'--%>
<%--                            }--%>
<%--                        }--%>
<%--                    ]--%>
<%--                };--%>

<%--                myChart6.setOption(option)--%>
<%--            }--%>
<%--            else {--%>
<%--                alert("图表加载数据失败!");--%>
<%--            }--%>
<%--        },--%>
<%--        error : function(errorMsg) {--%>
<%--//没做出错处理 //请求失败时执行该函数--%>
<%--            alert("图表请求数据失败!");--%>
<%--        }--%>
<%--    })--%>

<%--</script>--%>
<%--</body>--%>
<%--</html>--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head >
  <title>Title</title>
  <script src= "js/echarts.js"></script>
  <script src="js/jquery.min.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script type="text/javascript">
    function getfind4() {
      var obj
      $.post('/servlet6', {name:$('#name4').val() }, function (data) {
        obj = eval(data);
        $("#recommend4").empty(); // 清空表格
        for(var i=0;i<obj.length;i++){
          $("#recommend4").append("<tr><td>"+(i+1)+"   </td><td>"+obj[i].name+"   </td><td>"+obj[i].value+"   </td></tr>");
        }

      })
    }
    $(document).ready(function() {
      $('#search4').click(function() {
        getfind4();
      });
    });
  </script>
</head>
<style>
  #a1{
    position: absolute;
    top: 30%;
    bottom: 0;
    left: 35%;
    right: 0;
    margin: auto;
    height:50%;
    width:60%;
  }
</style>
<body  >
<form method="post" action="" id="listform4">
  <div class="panel admin-panel" id="a4">
    <div class="panel-head"><strong class="icon-reorder" style="color: darksalmon;align-content: center"> 商品列表</strong> <a href="" style="float:right; display:none;color: lightpink" >添加字段</a></div>
    <div class="padding border-bottom">
      <ul class="search" style="padding-left:10px;">
        <form action="">
          <li style="align-content: center;color: darksalmon" >商品名:
            <input type="text" placeholder="请输入搜索关键字" name="keywords" id="name4" class="input" style="width:25%; line-height:17px;display:inline-block" />
            <a href="javascript:void(0)" class="button border-main icon-search" id="search4" style="color: lightpink"> 搜索</a>

          </li>
        </form>
      </ul>
    </div>
    <table class="table table-hover text-center" id="recommend4" style="color: lightpink" cellspacing="30">

      <tbody id="tb4" style="color: lightpink"></tbody>

    </table>
  </div>
</form>
</body>
</html>